<template>
  <div>
    <el-container style="height: 800px; border: 1px solid #eee">
      <el-aside  width="200px" style="background-color: rgb(238, 241, 246)">
        <Aside></Aside>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;">
          <Head></Head>
        </el-header>
        <el-main>

          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="请输入">
              <el-input v-model="formInline.input" placeholder="******"></el-input>
            </el-form-item>
            <el-form-item label="选择角色">
              <el-select v-model="formInline.role" placeholder="******">
                <el-option label="输入教职工号查询" value="teacher"></el-option>
                <el-option label="输入学生学号查询" value="student"></el-option>
                <el-option label="输入班级编号查询" value="class"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchByRole(formInline.input, formInline.role)">查询</el-button>
            </el-form-item>
          </el-form>
          <el-form :inline="true">
            <el-table
                :data="tableData"
                style="width: 100%"
                height="480">
              <el-table-column
                  fixed
                  prop="course"
                  label=""
                  >
              </el-table-column>
              <el-table-column
                  prop="one"
                  label="周一"
                  >
              </el-table-column>
              <el-table-column
                  prop="two"
                  label="周二"
                  >
              </el-table-column>
              <el-table-column
                  prop="three"
                  label="周三"
                  >
              </el-table-column>
              <el-table-column
                  prop="four"
                  label="周四"
                  >
              </el-table-column>
              <el-table-column
                  prop="five"
                  label="周五"
                  >
              </el-table-column>
            </el-table>
          </el-form>

          <el-dialog title="新增" v-model="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="课程名称" :label-width="formLabelWidth">
                <el-input @blur="searchClass(courseName)" v-model="courseName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="选择班级" :label-width="formLabelWidth">
                <el-select v-model="form.classId" placeholder="请选择">
                  <el-option
                      v-for="item in thisList"
                      :key="item.classId"
                      :label="item.className"
                      :value="item.classId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择教师" :label-width="formLabelWidth">
                <el-select v-model="form.teacherId" placeholder="请选择">
                    <el-option
                        v-for="teacher in teacherList"
                        :key="teacher.teacherId"
                        :label="teacher.teacherName"
                        :value="teacher.teacherId">
                    </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="上课时间" :label-width="formLabelWidth">
                <el-select v-model="form.whichDay" placeholder="******">
                  <el-option label="周一" value="1"></el-option>
                  <el-option label="周二" value="2"></el-option>
                  <el-option label="周三" value="3"></el-option>
                  <el-option label="周四" value="4"></el-option>
                  <el-option label="周五" value="5"></el-option>
                </el-select>
                <el-select v-model="form.whichSection" placeholder="******">
                  <el-option label="第一节课" value="1"></el-option>
                  <el-option label="第二节课" value="2"></el-option>
                  <el-option label="第三节课" value="3"></el-option>
                  <el-option label="第四节课" value="4"></el-option>
                  <el-option label="第五节课" value="5"></el-option>
                  <el-option label="第六节课" value="6"></el-option>
                  <el-option label="第七节课" value="7"></el-option>
                  <el-option label="第八节课" value="8"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="confirmAddOrUpdate">确 定</el-button>
                    </span>
            </template>
          </el-dialog>

          <el-button class="el-button" size="medium" @click="addInfo">新增</el-button>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Head from "@/components/Head";
import Aside from "@/components/Aside";
export default {
  components: {
    Head,
    Aside
  },
  name: "ClassCourse",
  data() {
    return {
      formInline : {
        input : '',
        role : ''
      },
      tableData : [],
      form : {
        classId : '',
        teacherId : '',
        whichDay : '',
        whichSection : ''
      },
      courseName : '',
      teacherList : [],
      thisList : [],
      dialogFormVisible : false,
      formLabelWidth : '120px',
      doMethod : ''
    }
  },
  methods : {
    searchByRole(input, role) {
      const _this = this
      _this.axios.get("/course/"+role+"/"+input).then(res => {
        console.log(res)
        _this.tableData = res.data.data
      })
    },
    searchClass(name) {
      const _this = this
      const courseTmp = {
        courseId: '',
        courseName: name
      }
      _this.axios.post('/course/getTeacher/list', courseTmp).then(res => {
        console.log(res)
        console.log(res.data.data)
        _this.teacherList = res.data.data
        console.log(_this.teacherList)
      })
      // _this.axios.get('/course/getTeacherList/'+name).then(res => {
      //   console.log(res);
      //   _this.teacherList = res.data.data
      // })
    },
    addInfo() {
      this.form.whichSection = ''
      this.form.whichDay = ''
      this.form.teacherId = ''
      this.form.classId = ''
      this.courseName = ''
      this.doMethod = 'add'
      this.dialogFormVisible = true
    },
    pushEditInfo(action) {
      const _this = this;
      console.log(this.form)
      this.axios.post("/course/class/" + action, this.form).then(res => {
        console.log(res)
        _this.dialogFormVisible = false
      })
    },
    confirmAddOrUpdate() {
      const _this = this
      this.$confirm('如果该节课已存在，将覆盖记录，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.pushEditInfo(_this.doMethod)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作已取消'
        });
      });
    }
  },
  created() {
    const _this = this
    _this.axios.get('/class/list').then(res => {
      console.log(res)
      console.log(res.data)
      _this.thisList = res.data.data
      console.log(_this.thisList)
    })
    _this.axios.get('/teacher/list').then(res => {
      console.log(res)
      _this.teacherList = res.data.data
      console.log(_this.teacherList)
    })
  }
}
</script>

<style scoped>

</style>
